
<script>
export default {
    name: "UserLogin",
    data() {
        return {
            userData: {
                username: '',
                password: '',
            },
            userRule: {
                username: [
                    { required: true, message: '请输入用户名。', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码。', trigger: 'blur' },
                    { type: 'string', min: 4, message: '密码长度大于4位', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$api.post('index/login', this.userData).then((res) => {
                        // this.info(res.data);
                        if (res.code === 0) {
                            // sessionStorage.setItem('data', JSON.stringify(res.data));
                            sessionStorage.setItem("token",res.data.token);
                            sessionStorage.setItem("username",res.data.username);
                            sessionStorage.setItem("avatar",res.data.avatar);
                            // console.log(JSON.parse(sessionStorage.getItem('data')));
                            this.$router.push({ path: '/' })
                        } else {
                            sessionStorage.removeItem("token");
                            sessionStorage.removeItem("username");
                            sessionStorage.removeItem("avatar");
                        }
                    });
                } else {
                    this.info("失败")
                }
            })
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        info(message) {
            this.$Notice.info({
                title: '提示',
                desc: message,
            });

        }
    }
}
</script>
<template>
    <div class="body_container">
        <Form ref="userData" :model="userData" :rules="userRule" :label-width="80" :label-colon="true">
            <FormItem prop="username" label="用户名">
                <Input v-model="userData.username" placeholder="用户名" size="large" type="text">
                <template #suffix>
                    <Icon type="ios-person-outline"></Icon>
                </template>
                </Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input v-model="userData.password" placeholder="password" size="large" type="password">
                <template #suffix>
                    <Icon type="ios-lock-outline"></Icon>
                </template>
                </Input>
            </FormItem>
            <FormItem>
                <Space :size="80">
                    <Button @click="handleSubmit('userData')" type="primary" size="large" class="btn">提交</Button>
                    <Button @click="handleReset('userData')" type="error" size="large" class="btn">重置</Button>
                </Space>
            </FormItem>
        </Form>
    </div>
</template>
<style scoped>
.body_container {
    width: 500px;
    height: auto;
    border: solid;
    border-radius: 10px;
    padding: 10px;
    margin: 10px auto;
}

.btn {
    width: 120px;
}
</style>